<template>
	<div>
		<el-dialog :title="fromTitle" :visible.sync="dialogFormVisible">
			<!-- element-ui的插槽 改变dialog的title属性 -->
			<!-- <div slot="title">
			<span>{{ fromTitle }}</span>
		</div> -->
			<el-form :rules="rules" :model="form" ref="formValidate">
				<el-form-item prop="sname" label="学生名称" :label-width="formLabelWidth"><el-input :readonly="isLook" v-model="form.sname"></el-input></el-form-item>

				<el-form-item prop="ssex" label="性别" :label-width="formLabelWidth">
					<el-radio :disabled="isLook" v-model="form.ssex" label="男">男</el-radio>
					<el-radio :disabled="isLook" v-model="form.ssex" label="女">女</el-radio>
				</el-form-item>

				<el-form-item prop="sage" label="学生年龄" :label-width="formLabelWidth">
					<el-input :readonly="isLook" v-model="form.sage" autocomplete="off"></el-input>
				</el-form-item>

				<el-form-item prop="stime" v-if="isUpdate" label="进班时间" :label-width="formLabelWidth">
					<el-col :span="11">
						<el-date-picker
							value-format="yyyy-MM-dd hh:mm:ss"
							:readonly="isLook"
							type="datetime"
							placeholder="进班时间"
							v-model="form.stime"
							style="width: 100%;"
						></el-date-picker>
					</el-col>
				</el-form-item>

				<el-form-item prop="sphone" label="手机号" :label-width="formLabelWidth">
					<el-input :readonly="isLook" v-model="form.sphone" autocomplete="off"></el-input>
				</el-form-item>

				<el-form-item prop="sclassid" label="班级" :label-width="formLabelWidth">
					<el-select @change="onSelectChange" :disabled="isLook" v-model="form.sclassid" placeholder="请选择">
						<el-option v-for="i in classesInfo" :key="i.cid" :label="i.cname" :value="i.cid"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer">
				<el-button @click="update_cancel('formValidate')">取 消</el-button>
				<el-button v-if="isUpdate" type="primary" @click="update_submit('formValidate')">确 定</el-button>
				<el-button v-else-if="!isUpdate && !isLook" type="primary" @click="update_submit('formValidate')">增 加</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
/* 引入api配置 */
import apiConfig from '../config/global.js';

export default {
	/**
	 * form :表单显示需要的值；
	 * dialogFormVisible:表单验证需要的属性；
	 * isLook:表单的内容是否为只读；
	 * isUpdate:判断当前是否为修改的标识；
	 * fromTitle
	 * classesInfo
	 * */
	props: [ 'form', 'fromTitle', 'classesInfo'],
	methods: {
		onSelectChange(val1) {
			/* 调用父组件的方法 */
			this.$parent.onSelectChange(val1);
		},
		update_cancel(formValidate) {
			this.$refs[formValidate].resetFields();
			this.dialogFormVisible = false;
			this.$parent.search_studentInfo();
			this.$parent.form = this.$parent.formEmpData;
		} /* 提交修改页面的确定按钮 */,
		update_submit(formValidate) {
			/* 修改的api */
			this.$refs[formValidate].validate(valid => {
				if (valid) {
					/* 关闭dialog */
					this.dialogFormVisible = false;
					if (this.$parent.isUpdate) {
						this.$parent.axiosPost(apiConfig.stuUpdateApi, this.form);
					} else {
						this.$parent.axiosPost(apiConfig.stuInsertApi, this.form);
					}
				} else {
					alert('请检查');
					return false;
				}
			});
		}
	},
	computed:{
		isLook(){
			return this.$parent.isLook;
		}
		,isUpdate(){
			return this.$parent.isUpdate;
		}
	},
	data() {
		return {
			dialogFormVisible: false,
			formLabelWidth: '120px',
			rules: {
				sname: [
					{
						required: true,
						message: '请输入学生的姓名...',
						trigger: 'blur'
					},
					{
						min: 2,
						max: 30,
						message: '学生的名字长度必须在2到30之间..,',
						trigger: 'blur'
					}
				],
				ssex: [
					{
						required: true,
						message: '请选择学生的性别...',
						trigger: 'blur'
					}
				],
				sage: [
					{
						required: true,
						message: '请输入学生的年龄...',
						trigger: 'blur'
					}
				],
				stime: [
					{
						required: true,
						message: '请输入学生的进班时间...',
						trigger: 'blur'
					}
				],
				sphone: [
					{
						required: true,
						message: '请输入学生的手机号...',
						trigger: 'blur'
					}
				],
				sclassid: [
					{
						required: true,
						message: '请选择学生的班级...',
						trigger: 'blur'
					}
				]
			}
		};
	}
};
</script>

<style></style>
